<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>虚拟dom</title>
  </head>
  <body>
    <!-- 什么叫做虚拟dom：虚拟dom是描述真实dom的对象 -->
    <!-- 虚拟dom优化在哪？回流和重绘：回流一定回触发重绘，重绘不一定回触发回流 -->

    <!-- <div class="app" style="width: 200px; height: 100px" id="box" name="list">
      <div class="item">
        <span class="label">姓名:</span>
        <p class="name">张三</p>
      </div>
      <div class="item">
        <span class="label">姓名:</span>
        <p class="name">李四</p>
      </div>
    </div> -->

    <div id="app"></div>

    <script>
      // 虚拟dom
      const vDomObj = {
        // 标签名称
        target: "div",
        // 属性
        props: {
          class: "app",
          id: "box",
          name: "list",
          style: "width: 100px;height:100px",
        },
        // 内容
        children: "我将是一个列表",
      };

      // 创建生成虚拟dom的方法
      const getVDom = (target, props, children) => {
        return {
          target,
          props,
          children,
        };
      };

      // 创建虚拟dom
      const newVdom = getVDom(
        "div",
        {
          class: "app",
          id: "box",
          name: "list",
          style: "width: 100px;height:100px;color: red",
        },
        [
          getVDom("div", { class: "item" }, [
            getVDom("span", { class: "label" }, "姓名:"),
            getVDom("p", { class: "name" }, "张三"),
          ]),
          getVDom("div", { class: "item" }, [
            getVDom("span", { class: "label" }, "姓名:"),
            getVDom("p", { class: "name" }, "李四"),
          ]),
        ]
      );

      // 创建虚拟dom生成真实的dom阶段
      const vDomToDom = (vDom) => {
        // target: 标签
        // props： 属性
        // children: 内容
        const { target, props, children } = vDom;

        // 创建真实dom
        const dom = document.createElement(target)

        // 给真实dom节点添加属性
        for(i in props) {
            // i:属性名
            // props[i]: 属性值
            dom.setAttribute(i, props[i])
        }

        // 添加内容
        // Array.isArray(判断的内容)：判断内容是否是一个数组
        if(Array.isArray(children)) {
            children.forEach(item => {
                // 将item这个虚拟dom转化成正式dom 并且添加到dom元素中
                dom.appendChild(vDomToDom(item))
            })
        } else {
            // 如果是个字符串的话
            dom.appendChild(document.createTextNode(children))
        }

        // 将创建好的真实dom返回
        return dom
      };


      document.getElementById('app').appendChild(vDomToDom(newVdom))

    </script>
  </body>
</html>
